<template>
  <div id="news">
    <div class="one" v-for="book in books" :key="book.id">
      <div class="zhong">
        <div class="one1">
          {{ book.wenben1 }} <span :class="book.ico" v-if="book.ico"></span>
        </div>
     
         
        
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
  data() {
    return {
        id:0,
      books: [],
    };
  },
  created() {
    let xhr = new XMLHttpRequest();
    xhr.open("get", "http://localhost:3000/shezhi");
    xhr.onreadystatechange = () => {
      if (xhr.readyState == 4 && xhr.status == 200) {
        console.log("xhr.responseText", xhr.responseText);
        this.books = JSON.parse(xhr.responseText);
      }
    };
    xhr.send();
  },
};
</script>

<style>
#news {

  width: 100%;
  /* background-color: crimson; */
 
}
.one {
  width: 100%;
  height: 3rem;
}
.zhong{
    width: 100%;
    height: 100%;
}
.one1{
    color: #000;
    height: 3rem;
    line-height: 3rem;
    display: flex;
    justify-content: space-between;
}
.one1 span{
   margin-right: 6rem;
}
</style>